<template>
  <div class="app-container">
    <section class="section" v-if="detail">
      <h1>今日概览(订单/鞋子)</h1>
      <div class="data-content">
        <div class="item" @click="toOrderList('comeFrom', '2')">
          <div class="basicInfo">
            <div class="card-title">
              美团线上洗<span>来自美团线上订单</span>
            </div>
            <div class="number">
              {{ detail.mtCount.orderSum || 0 }}/{{
                detail.mtCount.totalShoesSum || 0
              }}
            </div>
          </div>
          <div class="icon"><i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="item" @click="toOrderList('comeFrom', '4')">
          <div class="basicInfo">
            <div class="card-title">
              小程序线上洗<span> 来自小程序线上订单</span>
            </div>
            <div class="number">
              {{ detail.xcxCount.orderSum || 0 }}/{{
                detail.xcxCount.totalShoesSum || 0
              }}
            </div>
          </div>
          <div class="icon"><i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="item" @click="toOrderList('comeFrom', '3')">
          <div class="basicInfo">
            <div class="card-title">抖音线上洗<span>来自抖音小程序线上订单</span></div>
            <div class="number">
              {{ detail.dyCount.orderSum || 0 }}/{{
                detail.dyCount.totalShoesSum || 0
              }}
            </div>
          </div>
          <div class="icon"><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
        
      <div class="data-content">
        <div class="item" @click="toOrderList('comeFrom', '1')">
          <div class="basicInfo">
             <div class="card-title">
               <div class="card-title">进店洗<span>来自到店订单</span></div>
              <div class="number">
              {{ detail.inCount.orderSum || 0 }}/{{
                detail.inCount.totalShoesSum || 0
              }}
            </div>
            </div>
          </div>
          </div>
      </div>

      <div class="data-content">
        <div class="item" @click="toOrderList('status', '2')">
          <div class="basicInfo">
            <div class="card-title">待入库<span>已到店订单</span></div>
            <div class="number">
              {{ detail.waitCount.orderSum || 0 }}/{{
                detail.waitCount.totalShoesSum || 0
              }}
            </div>
          </div>
          <div class="icon"><i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="item" @click="toOrderList('status', '4')">
          <div class="basicInfo">
            <div class="card-title">待出库<span>已完成清洗</span></div>
            <div class="number">
              {{ detail.outCount.orderSum || 0 }}/{{
                detail.outCount.totalShoesSum || 0
              }}
            </div>
          </div>
          <div class="icon"><i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="item" @click="toOrderList('status', '3')">
          <div class="basicInfo">
            <div class="card-title">清洗中<span>已入库清洗中订单</span></div>
            <div class="number">
              {{ detail.washCount.orderSum || 0 }}/{{
                detail.washCount.totalShoesSum || 0
              }}
            </div>
          </div>
          <div class="icon"><i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
    </section>
    <section class="section">
      <h1>常用功能</h1>

      <div>
        <el-button type="primary" @click="toRouter('/order/inStorage')"
          >快速入库</el-button
        >
        <el-button type="success" @click="toRouter('/order/outStorage')"
          >快速出库</el-button
        >
        <el-button type="warning" @click="toRouter('/order/edit')"
          >进店洗开单</el-button
        >
        <el-button type="danger" @click="toRouter('/order/list')"
          >返洗开单</el-button
        >
      </div>
    </section>
     <!-- 订单修复后，需要影藏  //todo -->
     <!-- <div style="width: 600px; ">
      <p style="color: red;">临时修复订单工具针对于不能入库操作的，历史订单全部修复后会隐藏,支持批量修复</p>
      <el-input v-model="orderNos" placeholder="请输入订单号多个订单号使用英文逗号(,)拼接" type="textarea" >
         
      </el-input>
      <el-button @click="fixOrderFn" style="margin-top: 10px;" type="success"> 确定</el-button>
    </div> -->
    <statics></statics>

  </div>
</template>

<script>
import { getHomeDataApi } from "@/api/common/index";
import { setStartOfDay, setEndOfDay } from "@/utils/tool";
import { correct} from '@/api/order/index'
import statics  from '@/components/statics'
export default {
  name: "Index",
  components:{
    statics
  },
  data() {
    return {
      detail: null,
      orderNos:""
    };
  },
  created() {
    this.getData();
  },
  methods: {
    fixOrderFn(){
           let arr=this.orderNos.split(",")
           correct({orderNos:arr}).then(res=>{
              this.$message.success("修复成功，请继续入库操作")
           })
    },
    getData() {
      getHomeDataApi(setStartOfDay(new Date())).then((res) => {
        this.detail = res.data;
      });
    },
    toRouter(path) {
      this.$router.push(path);
    },
    toOrderList(type, status) {
      this.$router.push({
        path: "/order/list",
        query: {
          [type]: status,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">

::v-deep .el-textarea__inne{
  height: 200px;
}

.section {
  margin-bottom: 50px;
  h1 {
    font-weight: bold;
  }
  .data-content {
    display: flex;
    flex-wrap: wrap;
    .item {
      flex: 0 0 calc(100% / 3 - 20px);
      margin-right: 30px;
      display: flex;
      align-items: center;
      padding: 15px;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      margin-bottom: 20px;
      cursor: pointer;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .basicInfo {
        flex: 1;
        text-align: left;
        .card-title {
          font-size: 18px;
          span {
            margin-left: 10px;
            font-size: 14px;
            color: #909399;
          }
        }
        .number {
          font-size: 32px;
          font-weight: bold;
          height: 50px;
          line-height: 50px;
        }
      }
      .icon {
      }
    }
  }
}
</style>
